<template>
  <div class="counter-warp">
    <div class="preupdate">TOKEN更新时间：{{ gmt }}</div>
    <textarea placeholder="token" v-model="token" disabled  @click="clickboard('token')"/>

    <div class="preupdate">我的openId：</div>
    <textarea placeholder="openId" v-model="openid" disabled  @click="clickboard('openid')"/>

    <div class="divcls">
      <a class="butclass1" @click="showtoken()">显示TOKEN</a>
      <a class="butclass2" @click="gettoken()">更新TOKEN凭证</a>
    </div>
    <mptoast />
  </div>

</template>

<script>
import { requestPost } from '@/utils/index'
import mptoast from 'mptoast'
export default {
  components: {
    mptoast
  },
  data () {
    return {
      token: '****',
      openid: '*****',
      stoken: '',
      gmt: 'xxxx-xx-xx xx:xx'
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'TOKEN 凭证'
    })
    this.hiddenstr()
    this.getstoken()
  },
  methods: {
    hiddenstr () {
      this.token = '****'
      this.gmt = 'xxxx-xx-xx xx:xx'
      this.openid = wx.getStorageSync('openid')
    },
    showtoken () {
      this.token = this.stoken
    },
    getstoken () {
      var that = this
      var data = {
        'openid': this.openid
      }
      requestPost(wx.getStorageSync('requestUrl') + '/wxsys/showToken', data, 'POST').then(function (value) {
        that.stoken = value.data.token
        that.gmt = value.data.gmt
      }, function (value) {
        console.log(value)
      })
    },
    gettoken () {
      var that = this
      var data = {
        'openid': this.openid
      }
      wx.showModal({
        title: '温馨提示',
        content: '更新后原TOKEN将永久失效。确定更新切记同步更新您代码中的TOKEN。确定更新TOKEN？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            requestPost(wx.getStorageSync('requestUrl') + '/wxsys/getToken', data, 'POST').then(function (value) {
              that.token = value.data.token
              that.gmt = value.data.gmt
            }, function (value) {
              console.log(value)
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    clickboard (type) {
      var needata = ''
      var that = this
      if(type==='token'){
        needata = that.stoken
      }else{
        needata = that.openid
      }
      wx.setClipboardData({
        data: needata,
        success (res) {
          wx.getClipboardData({
            success (res) {
              wx.hideToast()
              wx.showToast({
                title: '复制' + type + '成功',
                icon: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
html,body,#app {
  background-color: #eee;
}
.counter-warp {
  margin-top: 2px;
}
.preupdate{
  width: 100%;
  height: 20px;
  text-align: center;
  font-size: 20px;
  color: rgba(165, 165, 165, 0.61);
}
textarea{
  background-color:  rgba(185, 221, 252, 0.26);
  border-bottom: 1px solid rgb(163, 161, 161);
  margin: 20px auto;
  padding:8px;
  width: 90%;
  height: 130px;
  border-radius: 5%;
  font-size: 23px;
}
.butclass1{
  float: left;
  width: 50%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: rgb(14, 14, 22);
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgba(155, 153, 153, 0.315);
  border-right: 1px solid rgba(155, 153, 153, 0.315);

}
.butclass2{
  float: right;
  width: 49.5%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: rgb(14, 14, 22);
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgba(155, 153, 153, 0.315);
}
.divcls{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0px;
}
</style>
